<template>
	<view class="">
		<u-sticky zIndex="999" bgColor="#f7f7f7" v-if="!isRadio">
			<u-tabs
				lineWidth="30"
				lineColor="#F3C35C"
				:activeStyle="{ color: '#111', fontWeight: 600 }"
				:inactiveStyle="{ color: '#999999' }"
				:scrollable="false"
				:list="tabList"
				@click="onTabs"
			></u-tabs>
		</u-sticky>
		<view class="pl-20 pr-20">
			<view v-if="coupons.length > 0">
				<view class="padding-20 bg-white mb-30 border-radius-10" v-for="(item, index) in coupons" :key="item.id">
					<view class="flex align-center" @click="toRadio(item)">
						<view
							class="width-130 height-130 border-radius-4 flex flex-column align-center justify-center"
							style="background: linear-gradient(34deg, #f3c45d, #edac2f)"
						>
							<!-- <text class="fsize-30 fweigh-600">{{item.parValue}}<text class="fsize-26">元</text></text> -->
							<text class="fsize-26">{{ item.typeName }}</text>
						</view>
						<view class="ml-20">
							<view class="fszie-30 fweigh-600">{{ item.couponName }}</view>
							<view class="fsize-24 line-gray-9 mt-10">{{ item.startDate }} - {{ item.endDate }}</view>
						</view>
					</view>
					<view class="mt-20 border-t pt-20" v-if="!isRadio">
						<view class="flex justify-between align-center">
							<view class="flex align-center" @click="onShowRule(index)">
								<text>使用规则</text>
								<view class="ml-10" :class="item.isShowRule ? 'down' : 'up'"><uni-icons custom-prefix="iconfont" type="icon-down" size="12" /></view>
							</view>
							<view class="my-button-mini" @click="openQrc(item.couponCode)">核销码</view>
						</view>
						<view class="rule-text fsize-22 line-gray-6 lh-32 mt-20" v-if="item.isShowRule">
							{{ item.distributionDate || '暂无' }}
							<!-- <view>1、本券仅适用于 FENDI CLUB 精酿啤酒屋下单购买任意商品</view>
							<view>2、本券每单仅使用一张，不与其他优惠券同享</view>
							<view>3、本券过期后不退，请在规定时间内使用</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<image src="/static/images/order/default_img_order.png"></image>
				<view>暂无可用优惠券</view>
			</view>
		</view>
		<u-popup :show="showQrc" @close="showQrc = false" round="6" :safeAreaInsetBottom="false" mode="center">
			<view class="qrc-content" v-if="!isRadio">
				<w-barcode :options="options" />
				<view class="mt-20 text-align-center">{{ options.code }}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showQrc: false,
			options: {
				width: 670,
				height: 100,
				code: 'E515215815165'
			},
			tabIndex: 0,
			isShowRule: false, // 默认不显示规则
			coupons: [],
			tabList: [
				{ name: '未使用', value: 0 },
				{ name: '已使用', value: 1 },
				{ name: '已过期', value: 2 }
			],
			isRadio: false
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	onLoad(opt) {
		if (opt.tickets) {
			(this.isRadio = true), (this.coupons = JSON.parse(opt.tickets) || []);
			// console.log(this.coupons);
		} else {
			this.getUserFoodCoupon(1);
		}
	},
	methods: {
		openQrc(code) {
			this.options.code = code;
			this.showQrc = true;
		},
		onTabs(e) {
			this.getUserFoodCoupon(e.index + 1);
		},
		getUserFoodCoupon(status) {
			this.$api.GetUserFoodCoupon({ pageNum: 1, pageSize: 9999, status: status }).then((res) => {
				this.coupons = res.data.list.map((im) => {
					im.isShowRule = false;
					return im;
				});
			});
		},
		onShowRule(ix) {
			this.coupons[ix].isShowRule = !this.coupons[ix].isShowRule;
		},
		toRadio(row) {
			if (this.isRadio) {
				uni.$emit('isRefresh', row);
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.up {
	transition: all 0.3s;
}
.down {
	transform: rotate(-180deg);
	transition: all 0.3s;
}
.qrc-content {
	padding: 20rpx;
}
.none {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #777;
	line-height: 1.3rem !important;

	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}
</style>
